<!-- 他人信息详情页 -->
<!-- 小吉子 更新于2020.08.22 -->

<!-- 小吉子 更新于2020.08.23 -->
<!-- 完善动态学术部分 -->
<!-- 修改滚动监听以及页面宽度获取 -->
<!-- 修改动态学术页面高度 新增AJAX -->

<!-- 小吉子 更新于2020.08.24 -->
<!-- 删除多余代码 -->

<!-- 小吉子 更新于2020.08.31 -->
<!-- 更新：1.完成他人信息详情接口
					2.完成关注他人接口
					3.完成帖子文章接口
					4.优化自己页面的文字显示 -->
<!-- 更新：图片缩放尺寸 -->
<!-- 修改：普通帖子摘要组件传值 -->

<!-- 小吉子 更新于2020.09.01 -->
<!-- 修改：普通帖子摘要组件传参 -->

<!-- 小吉子 更新于2020.09.02 -->
<!-- 修改：滑动部分尺寸计算 -->

<!-- 小吉子 更新于2020.09.05 -->
<!-- 修改：1.微调样式 -->

<!-- 小吉子 更新于2020.09.06 -->
<!-- 修改；接口传参 -->

<!-- 小吉子 更新于2020.09.07 -->
<!-- 修改：1.组件引入
					2.关注状态 -->

<!-- 小吉子 更新于2020.09.08 -->
<!-- 修改：微调样式 -->

<!-- 小吉子 更新于2020.09.20 -->
<!-- 修改：1.删除多余代码
					2.优化未登录的关注 -->
<template>
	<view class="other_information">
		<!-- 用来将页面整体向下顶，给屏幕状态栏留出空间 -->
		<view class="status_bar"></view>
		<!-- 自定义导航栏 -->
		
		<!-- 他人信息 -->
		<view class="user_box" :style="'background-image:url(' + personMessage.bgImageUrl+ ');'">
			<view class="nav_bar" :class="{notTop: isNotTop}">
				<view class="aside return" @tap="back">
					<text class="inxupt inxupttubiao20"></text>
				</view>
				<view class="message"></view>
				<view class="aside"></view>
			</view>
			<view class="user">
				<!-- 基本信息，是否关注 -->
				<view class="message_attention">
					<view class="message_box">
						<image :src="personMessage.avatarUrl" @tap="previewImg(personMessage.avatarUrl)" mode="aspectFill" class="photo"></image>
						<view class="message">
							<view class="nickName_gender">
								<text class="name">{{personMessage.nickname}}</text>
								<text class="inxupt inxupttubiao27 gender" v-if="personMessage.gender === 1"></text>
								<text class="inxupt inxupttubiao28 gender" v-else-if="personMessage.gender === 2"></text>
							</view>
							<view class="level_box">
								<Level :level="personMessage.level"></Level>
								<text>{{personMessage.grade}}{{personMessage.major}}</text>
							</view>
							<view class="description">
								<text>{{personMessage.description}}</text>
							</view>
						</view>
					</view>
					<view class="attention_box" v-if="(userId != hisId) && userId">
						<text class="attention" @tap="changeFollowed" :class="{isFollowed: isFollowed}">{{text}}</text>
					</view>
				</view>
				<!-- 获赞 粉丝 关注 数量 -->
				<view class="number_box">
					<view class="number_item">
						<text class="number">{{personMessage.likedNum}}</text>
						<text class="text">获赞次数</text>
					</view>
					<view class="number_item">
						<text class="number">{{personMessage.fansNum}}</text>
						<text class="text" v-if="personMessage.gender === 2">她的粉丝</text>
						<text class="text" v-else>他的粉丝</text>
					</view>
					<view class="number_item">
						<text class="number">{{personMessage.followNum}}</text>
						<text class="text" v-if="personMessage.gender === 2">她的关注</text>
						<text class="text" v-else>他的关注</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 动态 学术 -->
		<view class="title">
			<view class="title_item" @tap="getActive" :class="isActive == '0' ? 'active' : ''" :data-index="0">
				<text class="text">动态 </text><text class="number">{{personMessage.newsNum}}</text>
			</view>
			<view class="title_item" @tap="getActive" :class="isActive == '1' ? 'active' : ''" :data-index="1">
				<text class="text">文章 </text><text class="number">{{personMessage.articleNum}}</text>
			</view>
		</view>
		<!-- ——————————小瓜子修改—————————— -->
		<swiper
			:style="'height:' + swiperItemHeight + 'px;' + 'transition: height 0.5s;'" 
			@change="swiperChange" 
			:current="isActive" >
			<swiper-item>
				<view :class="isActive == 0 ? 'page page_active' : 'page'">
					<PostingsSummarys v-for="(item,index) in personDynamic" :key="index" :datas="item" :isNav="true"></PostingsSummarys>
					<UniLoadMore :status="dynamicStatus" color="#7f7f7f" :contentText="contentText"></UniLoadMore>
				</view>
			</swiper-item>
			<swiper-item>
				<view :class="isActive == 1 ? 'page page_active' : 'page'">
					<AcademicSummary v-for="(item,index) in personAcademic" :key="index" :datas="item"></AcademicSummary>
					<UniLoadMore :status="academicStatus" color="#7f7f7f" :contentText="contentText"></UniLoadMore>
				</view>
			</swiper-item>
		</swiper>
		<!-- —————————————————————————————— -->
		
		<!-- <view :style="'height:' + Math.max(dynamicHeight, academicHeight) + 'px;transition: height 0.25s;'" class="swiper_box">
			<swiper :current="isActive" @change="swiperChange" style="height: 100%;">
				<swiper-item>
					<view v-for="(item,index) in personDynamic" :key="index">
						<view class="item">
							<PostingsSummarys :datas="item" :isNav="true"></PostingsSummarys>
						</view>	
						<UniLoadMore :status="dynamicStatus" :contentText="contentText" color="@g-gray"></UniLoadMore>
					</view>
				</swiper-item>
				<swiper-item>
					<view v-for="(item,index) in personAcademic" :key="index">
						<view class="item">
							<AcademicSummary :datas="item"></AcademicSummary>	
						</view>	
						<UniLoadMore :status="academicStatus" :contentText="contentText" color="@g-gray"></UniLoadMore>
					</view>
				</swiper-item>
			</swiper>	
		</view> -->	
		</view>
	</view>
</template>

<script>
	import AcademicSummary from '../../components/summary/AcademicSummary.vue'
	import PostingsSummarys from '../../components/summary/PostingsSummarys.vue'
	import Level from '../../components/Level.vue'
	import UniLoadMore from '../../components/plugins/uni-load-more.vue'
	import {_ajax} from '../../in-xupt-functions.js'
	export default {
		onShow() {
			if(uni.isPriview) {
				uni.isPriview = false
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '正在加载中...'
			})
			this.hisId = option.userId
			let _self = this
			_self.userId = uni.getStorageSync('userId')
			uni.getSystemInfo({
				success: function(res) {
					_self.screenWidth = res.screenWidth
					_self.screenHeight = res.screenHeight
				}
			})
			_ajax({
				url: '/user/'+parseInt(_self.hisId)+'/page',
				method: 'get'
			}).then(res => {
				console.log(res)
				_self.personMessage = res.data.data
				_self.isFollowed = _self.personMessage.followed
				_self.getheight(500)
				_ajax({ // 获取动态
					url: '/user/'+parseInt(_self.hisId)+'/posts'+'?pageNum='+_self.dynamicNowpage+'&pageSize='+_self.pageSize,
					method: 'get'
				})
				.then( res => {
					if(res.data.status == 0) {
						_self.personDynamic.push(...res.data.data.list)
						_self.dynamicIsLastpage = res.data.data.isLastPage
						if(_self.personDynamic.length == 0 || _self.dynamicIsLastpage) {
							_self.dynamicStatus = 'noMore'
						} else {
							_self.dynamicStatus = 'more'
						}
					}
					_ajax({ // 获取文章
						url: '/user/'+parseInt(_self.hisId)+'/articles'+'?pageNum='+_self.academicNowPage+'&pageSize='+_self.pageSize,
						method: 'get'
					}).then( res => {
						if(res.data.status == 0) {
							_self.personAcademic.push(...res.data.data.list)
							_self.academicIsLastPage = res.data.data.isLastPage
							_self.getheight(500)
							if(_self.personAcademic.length == 0 || _self.academicIsLastPage) {
								_self.academicStatus = 'noMore'
							} else {
								_self.academicStatus = 'more'
							}
						}
						uni.hideLoading()
					})
				})
			})
		},
		// 屏幕滚动改变顶栏
		onPageScroll(page) {
			let _self = this
			let scrollTop = page.scrollTop;
			let height = 100 / 750 * parseInt(_self.screenWidth)
			if(scrollTop >= height) {
				this.isNotTop = true
			} else {
				this.isNotTop = false
			}
		},
		
		data() {
			return {
				swiperItemHeight: 0,
				isNotTop: false,
				isFollowed: false,
				text: '关注',
				followed: false,
				personMessage: {},
				personAcademic: [], // 文章列表
				personDynamic: [], // 动态列表
				isActive: 0,
				screenWidth: 0, // 屏幕宽度
				screenHeight: 0, // 屏幕高度
				userId: 0,
				hisId: 0,
				// 动态获取帖子文章所需参数
				contentText: {
					contentdown: "上拉翻找更多东西~", // loading前的文字显示
					contentrefresh: "正在翻找~~", // loading中的显示
					contentnomore: "没有东西啦！" // 没有更多的显示
				},
				academicStatus: "more",
				dynamicStatus: "more",
				academicNowPage: 1,
				academicIsLastPage: false,
				dynamicNowpage: 1,
				dynamicIsLastpage: false,
				pageSize: 15,
			}
		},
		
		components:{
			AcademicSummary,
			PostingsSummarys,
			Level,
			UniLoadMore
		},
		
		methods: {
			// 更新当前swiper高度
			getheight: function(time) {
				setTimeout(() => {
					// 获取当前swiper-item的高度
					let query = uni.createSelectorQuery();
					let page_active = query.select(".page_active");
					page_active.fields({
						size: true
					}, data => {
						// 获取当前设备的高度，取swiper高度为设备高度和swiper-item高度的最大值 （这个方法有bug）
						uni.getSystemInfo({
							success: (data2) => {
								if (data.height <= data2.windowHeight) {
									this.status = 'noMore'
								}
								this.swiperItemHeight = Math.max(data2.windowHeight - 80, data.height) + 20;
							}
						})
						// 将swiper的高度同步
						// this.swiperItemHeight = data.height + 20;
						// console.log(this.swiperItemHeight)
					}).exec();
				},time)
			},
			previewImg: function(logourl){
				var that=this;
				var imgsArray = [];
				imgsArray[0] = logourl;
				uni.previewImage({
					urls: imgsArray,
					current: 0,
					longPressActions: {
						itemList: ['保存到相册'],
						success: data => {
							uni.downloadFile({
								url: imgsArray[0],
								success: function(res) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: () => {
											uni.showToast({
												title: '保存成功',
												icon: 'none'
											});
										}
									});
								}
							});
						}
					}
				});
			},
			// 返回上级页面
			back() {
				uni.navigateBack()
			},
			// 改变关注状态
			changeFollowed() {
				let _self = this
				if(_self.isFollowed) {
					_ajax({
						method: 'delete',
						url: '/user/follow/'+parseInt(_self.hisId)
					}).then(res => {
						if(res.data.status == 0) {
							// console.log(res.data)
							_self.isFollowed = !_self.isFollowed
						} else {
							uni.showToast({
								title: '取消关注失败',
								icon: 'none',
								position: 'center'
							})
						}
					})
				} else {
					_ajax({
						method: 'post',
						url: '/user/follow/'+parseInt(_self.hisId)
					}).then(res => {
						if(res.data.status == 0) {
							// console.log(res.data)
							_self.isFollowed = !_self.isFollowed
						} else {
							uni.showToast({
								title: '关注失败',
								icon: 'none',
								position: 'center'
							})
						}
					})
				}
			},
			
			// 动态 学术 的 active
			getActive(e) {
				this.isActive = e.currentTarget.dataset.index
			},
			// 动态 学术 页面左右滑动
			swiperChange(e) {
				this.isActive = e.detail.current
				this.getheight(200)
			},
			// 更多动态
			moreDynamic() {
				let _self = this
				if(!_self.dynamicIsLastpage) {
					_self.dynamicNowpage += 1
					_self.dynamicStatus = 'loading'
					_ajax({
						url: '/user/'+parseInt(_self.hisId)+'/posts'+'?pageNum='+_self.dynamicNowpage+'&pageSize='+_self.pageSize,
						method: 'get'
					}).then( res => {
						if(res.data.status == 0) {
							_self.personDynamic.push(...res.data.data.list)
							_self.dynamicIsLastpage = res.data.data.isLastPage
							_self.getheight(500)
							if(!_self.dynamicIsLastpage) {
								_self.dynamicStatus = 'noMore'
							} else {
								_self.dynamicStatus = 'more'
							}
							// _self.getdynamicHeight()
						}
					})	
				}
			},
			// 更多文章
			moreAcademic() {
				let _self = this
				if(!_self.academicIsLastPage) {
					_self.academicStatus = 'loading'
					_self.academicNowPage += 1
					_ajax({
						url: '/user/'+parseInt(_self.hisId)+'/articles'+'?pageNum='+_self.academicNowPage+'&pageSize='+_self.pageSize,
						method: 'get'
					}).then( res => {
						if(res.data.status == 0) {
							_self.personAcademic.push(...res.data.data.list)
							_self.academicIsLastPage = res.data.data.isLastPage
							_self.getheight(500)
							if(!_self.academicIsLastPage) {
								_self.academicStatus = 'noMore'
							} else {
								_self.academicStatus = 'more'
							}
							// _self.getacademicHeight()
						}
					})	
				}
			},
			// 上拉加载
			loadMore() {
				if(this.isActive == 0) {
					if(this.dynamicIsLastpage) {
						this.dynamicStatus = 'noMore'
					} else {
						this.moreDynamic()
					}
				} else {
					if(this.academicIsLastPage) {
						this.academicStatus = 'noMore'
					} else {
						this.moreAcademic()
					}
				}
			},
			swichTab: function (e) {
				this.isActive = e.currentTarget.dataset.index
			},
		},
		watch: {
			isFollowed: function() {
				if(this.isFollowed) {
					this.text = '已关注'
				} else {
					this.text = '关注'
				}
			},
		},
		computed: {
			dynamicHeight() {
				if(this.personMessage.articleNum == 0 || this.personMessage.articleNum == 1) {
					return (750 * this.screenHeight / this.screenWidth - 700) * this.screenWidth / 750
				} else {
					return (750 * this.screenHeight / this.screenWidth - 210) * this.screenWidth / 750
				}
			},
			academicHeight() {
				if(this.personMessage.newsNum == 0 || this.personMessage.newsNum == 1) {
					return (750 * this.screenHeight / this.screenWidth - 700) * this.screenWidth / 750
				} else {
					return (750 * this.screenHeight / this.screenWidth - 210) * this.screenWidth / 750
				}
			},
		},
		// 上拉加载
		onReachBottom: function() {
			this.loadMore()
		},
	}
</script>

<style lang="less">
.other_information {
	// --status-bar-height为设备状态栏高度
	@statusHeight: var(--status-bar-height);
	background-color: @g-background;
	.status_bar {
		height: @statusHeight;
		width: 100%;
		background-color: #FFFFFF;
		position: fixed;
		top: 0rpx;
		z-index: 2;
	}
	// 自定义顶栏
	
	// 用户信息
	.user_box {
		position: fixed;
		top: @statusHeight;
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position: center; 
		background-clip: border-box;
		position: relative;
		overflow: visible;
		// margin-top: calc(100rpx + @statusHeight);
		.nav_bar {
			
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			color: #000000;
			font-size: 14px;
			z-index: 100;
			background-color: rgba(255, 255, 255, .7);
			.aside {
				width: 120rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				
				text {
					display: inline-block;
					width: 90%;
					height: 95%;
					font-size: 1.2rem;
					font-weight: bold;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				// flex: 1;
			}
			.return {
				transform: rotate(180deg);
			}
			.message {
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
			}
		}
		.notTop {
			background-color: @g-background!important;
		}
		.user {
			background-clip: border-box;
			padding: 0.5rem 1rem;
			background-color: rgba(255, 255, 255, .7);
			.message_attention {
				display: flex;
				// padding: 10rpx 50rpx;
				justify-content: space-between;
				align-items: flex-start;
				
				.message_box, .attention_box {
					display: flex;
					justify-content: space-around;
					height: 100%;
				}
				.message_box {
					display: flex;
					justify-content: start;
					align-items: center;
					flex: 1;
					
					.photo {
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
					}
					.message {
						border-left: 20rpx solid transparent;
						line-height: 1.3rem;
						flex: 1;
						
						.nickName_gender, .level_box, .description {
							display: flex;
							justify-content: flex-start;
							align-items: center;
						}
						.nickName_gender {
							font-weight: border;
							font-size: 20px;
							
							.gender {
								
							}
						}
						.level_box {
							font-size: 0.7rem;
							color: #5f5f5f;
						}
						.description {
							font-size: 0.75rem;
							color: @g-gray;
						}
					}
				}
				.attention_box {
					width: 150rpx;
					align-items: top;
					
					.attention {
						display: inline-block;
						width: 120rpx;
						line-height: 2.5rem;
						border-radius: 100rpx;
						background-color: #FA7298;
						color: white;
						margin-top: 45rpx;
						height: 1.5rem;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.isFollowed {
						background-color: white;
						color: @g-gray;
					}
				}
			}
			.number_box {
				display: flex;
				justify-content: space-around;
				align-items: center;
				line-height: 1.5rem;
				background-color: rgba(255, 255, 255, 0.6);
				border-radius: 5px;
				margin: 50rpx 0 30rpx;
				
				.number_item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					
					.number {
						font-size: 20px;
						// font-weight: bold;
						flex: 1;
						line-height: 2rem;
					}
					.text {
						color: #6f6f6f;
					}
				}
			}	
		}
		
	}
	// 动态 学术
	.title {
		display: flex;
		line-height: 1.3rem;
		padding: 1rem 2px 0;
		margin-top: @statusHeight;
		.title_item {
			color: @g-gray;
			display: flex;
			font-size: 1rem;
			justify-content: center;
			align-items: flex-end;
			font-weight: bold;
			padding-bottom: 2px;
			padding: 2px 10px;
			border-bottom: 2px solid transparent;
		}
		.active {
			border-bottom: 2px solid @g-pink;
			.text {
				color: #3f3f3f;
			}
			.number {
				color: @g-pink;
			}
		}	
	}
	swiper {
		swiper-item {
			scroll-view {
				height: 100%;
			}
			.item {
				margin: 10px 0;
			}
		}
		
	}
}
</style>
